<template>
  <div class="navbar">
    <!-- 折叠侧边栏按钮 -->
    <div class="hamburger-container" @click="toggleSidebar">
      <el-icon :class="{ 'is-active': !isSidebarCollapsed }">
        <Fold v-if="isSidebarCollapsed" />
        <Expand v-else />
      </el-icon>
    </div>

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item 
          v-for="(item, index) in breadcrumbList" 
          :key="index"
          :to="{ path: item.path }"
        >
          {{ item.meta?.title || '首页' }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="right-menu">
      <!-- 主题切换按钮 -->
      <ThemeSwitch class="right-menu-item hover-effect" />
      
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand">
        <div class="avatar-container">
          <el-avatar :size="30" :src="userAvatar">
            {{ userInfo?.username?.charAt(0)?.toUpperCase() || 'U' }}
          </el-avatar>
          <span class="username">{{ userInfo?.username || '用户' }}</span>
          <el-icon><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDown, Fold, Expand } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import ThemeSwitch from '@/components/ThemeSwitch/index.vue'

// 获取路由信息
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const appStore = useAppStore()

// 侧边栏状态
const isSidebarCollapsed = computed(() => appStore.sidebarCollapsed)

// 用户信息
const userInfo = computed(() => userStore.userInfo || {})
const userAvatar = computed(() => userInfo.value?.avatar || '')

// 面包屑数据
const breadcrumbList = computed(() => {
  // 生成面包屑数据
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  const first = matched[0]
  
  if (!first) {
    return []
  }
  
  return matched
})

/**
 * @description 切换侧边栏折叠状态
 */
const toggleSidebar = () => {
  appStore.toggleSidebar()
}

/**
 * @description 处理下拉菜单命令
 * @param {string} command - 下拉菜单命令
 */
const handleCommand = (command) => {
  if (command === 'profile') {
    router.push('/profile')
  } else if (command === 'logout') {
    ElMessageBox.confirm('确认退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await userStore.logout()
      router.push('/login')
    }).catch(() => {})
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background-color: var(--header-bg);
  box-shadow: var(--box-shadow-light);
  display: flex;
  align-items: center;
  padding: 0 15px;
  
  .hamburger-container {
    line-height: 50px;
    height: 100%;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    margin-right: 15px;
    color: var(--header-text-color);
    
    &:hover {
      background: var(--header-item-hover);
    }
    
    .is-active {
      transform: rotate(180deg);
    }
  }
  
  .breadcrumb {
    flex: 1;
    overflow: hidden;
    
    :deep(.el-breadcrumb__inner) {
      color: var(--text-color-secondary);
      
      &.is-link {
        color: var(--header-text-color);
        
        &:hover {
          color: var(--primary-color);
        }
      }
    }
    
    :deep(.el-breadcrumb__separator) {
      color: var(--text-color-secondary);
    }
  }
  
  .right-menu {
    display: flex;
    align-items: center;
    
    .right-menu-item {
      display: flex;
      align-items: center;
      margin-left: 10px;
    }
    
    .hover-effect {
      cursor: pointer;
      
      // &:hover {
      //   background-color: var(--header-item-hover);
      //   border-radius: 4px;
      // }
    }
    
    .avatar-container {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 10px;
      height: 100%;
      
      .username {
        margin: 0 10px;
        color: var(--header-text-color);
      }
    }
  }
}
</style> 